<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<title>ChatChatCat全球第一貓咪社群網站</title>

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/leftsidebar.css">
<link rel="stylesheet" href="css/sunny/fontsize1.1/jquery-ui-1.10.4.custom.css">
<link rel="stylesheet" href="css/jquery.message.css">
<link rel="stylesheet" href="css/lightbox.css" />
<link type="text/css" rel="stylesheet" href="css/rcarousel.css" />
<link type="text/css" rel="stylesheet" href="css/jquery.custom-scrollbar.css" />

<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.rcarousel.min.js"></script>
<script src="js/jquery.autoheight.js"></script>
<script src="js/leftsidebar.js"></script>
<script src="js/jquery.message.js"></script>
<script src="js/jquery.custom-scrollbar.js"></script>

<style>
.menu {
	position: relative;
	display: block;
	width: 1125px;
	height: 100px;
	margin: 0;
	border: 0px;
	margin-left: auto;
	margin-right: auto;
}

.mainContent {
	width: 1125px;
	border: 0px;
	frameBorder: 0px;
	cellspacing: 0px;
	marginwidth: 0px;
	marginheight: 0px;
	overflow: hidden;
	margin: 0;
	display: block;
}

.mainContentblock{
	width: 1125px;
	margin: 0;
	padding: 0;
	display: block;
	margin-left: auto;
	margin-right: auto;
	border: 0px;
	display: block;
}

body {
	padding: 0;
	margin: 0;
}

.ui-dialog,.ui-button,.ui-button-text .ui-button {
	font-family: '微軟正黑體';
}

.inv {
	visibility: hidden;
	position: absolute;
}

.board,.board:visited {
	text-decoration: none;
	font-family: '微軟正黑體';
	font-size: 12px;
	color: rgb(153,123,93);
	padding: 18px;
	text-shadow: 0px 0px 2px rgb(240,236,232);
}

.board:hover {
	color: black;
	text-shadow: 0px 0px 1px rgb(240,236,232);
}

.boardarrowclass {
	opacity: 0.1;
	filter: alpha(opacity =    10);
}

.boardarrowclass2 {
	opacity: 0.2;
	filter: alpha(opacity =    20);
}

.logotextclass {
	text-shadow: 0px 0px 5px black;
	color: #fff4dd;
	font-family: '微軟正黑體';
	font-weight: 700;
	text-decoration: none;
	font-size: 24px;
	z-index: 0;
	position: absolute;
	top: 62px;
	left: 200px;
	opacity: 0.2;
	filter: alpha(opacity =    20);
}

.logotextclass2 {
	text-shadow: 0px 0px 5px black;
	color: #ffdc6a;
	font-family: '微軟正黑體';
	font-weight: 700;
	text-decoration: none;
	font-size: 24px;
	z-index: 0;
	position: absolute;
	top: 62px;
	left: 200px;
	opacity: 1;
	filter: alpha(opacity =    100);
}

.logoclass {
	position: absolute;
	top: 4px;
	left: 0px;
	z-index: 1;
	opacity: 1;
	filter: alpha(opacity =    100);
}

.logoclass2 {
	position: absolute;
	top: 4px;
	left: 0px;
	z-index: 1;
	opacity: 0.1;
	filter: alpha(opacity =    10);
}

#commenticon {
	position: absolute; top: 14px; right: 195px; opacity: 0.3; filter: alpha(opacity = 30);
}

#commenticon:hover {
	opacity: 1; filter: alpha(opacity = 100);
}

#commenticon:active {
	top: 15px; right: 194px;
}

#activityicon {
	position: absolute; top: 13px; right: 108px; opacity: 0.3; filter: alpha(opacity = 30);
}

#activityicon:hover {
	opacity: 1; filter: alpha(opacity = 100);
}

#activityicon:active {
	top: 14px; right: 107px;
}

#addfriendicon {
	position: absolute; top: 14px; right: 150px; opacity: 0.3; filter: alpha(opacity = 30);
}

#addfriendicon:hover {
	opacity: 1; filter: alpha(opacity = 100);
}

#addfriendicon:active {
	top: 15px; right: 149px;
}

#warningicon {
	position: absolute; top: 14px; right: 63px; opacity: 0.3; filter: alpha(opacity = 30);
}

#warningicon:hover {
	opacity: 1; filter: alpha(opacity = 100);
}

#warningicon:active {
	top: 15px; right: 62px;
}

.alarmnumber {
	position:absolute;
	top: -2px;
	left: 25px;
	text-decoration: none;
	font-family: '微軟正黑體';
	font-size: 10px;
	color: white;
	background: red;
	padding-left: 3px;
	padding-right: 3px;
	border-radius: 5px;
}
</style>

<script>
	$(function() {

		$("#option").dialog({
			width : 500,
			autoOpen : false,
			modal : true,
			show : {
				effect : "fade",
				duration : 500
			},
			hide : {
				effect : "fade",
				duration : 200
			}
		});

		$("#signup").dialog({
			width : 600,
			autoOpen : false,
			modal : true,
			show : {
				effect : "fade",
				duration : 500
			},
			hide : {
				effect : "fade",
				duration : 200
			}
		});
		
		$("#manageactivity").dialog({
			width : 600,
			autoOpen : false,
			modal : true,
			show : {
				effect : "fade",
				duration : 500
			},
			hide : {
				effect : "fade",
				duration : 200
			}
		});	

		$("#carousel").rcarousel({
			visible : 1,
			step : 1,
			width : 300,
			height : 80,
			auto : {
				enabled : true,
				direction : "next",
				interval : 3000
			}
		});

		$('#logoid').hover(function() {
			// on hovering over, find the element we want to fade *up*
			var fade = $('> div', this);
			// if the element is currently being animated (to a fadeOut)...
			if (fade.is(':animated')) {
				// ...take it's current opacity back up to 1
				fade.stop().fadeTo(250, 1);
			} else {
				// fade in quickly
				fade.fadeIn(250);
			}
		}, function() {
			// on hovering out, fade the element out
			var fade = $('> div', this);
			if (fade.is(':animated')) {
				fade.stop().fadeTo(3000, 0);
			} else {
				// fade away slowly
				fade.fadeOut(3000);
			}
		});

		$(".buttonClass").button();

		$("#openoption").click(function() {
			$('#option').dialog('open');
		});
		
		$("#logout").click(function() {
			alert("使用者按下登出鍵");
		});
		
		$(".boardarrowclass").hover(function() {
			$(this).toggleClass("boardarrowclass2", {duration: 300}).clearQueue();
		});

		$("#logo").hover(function() {
			$(".logotextclass").toggleClass("logotextclass2", {duration: 300}).clearQueue();
			$("#logoid").toggleClass("logoclass2", {duration: 300}).clearQueue();
		});

		$(".page-main > aside > ul > li").click(function() {
			alert("跳至該會員頁面");
		});

		$(".page-main > aside > ul").customScrollbar({
			updateOnWindowResize : false
		});

		$("#addfriendicon").hover(function() {
			$(this).toggleClass("addfriendiconclass2", {duration: 150}).clearQueue();
		});
	
		$(".afterlogin").hide();
	});

	$(window).load(function() {
		$(".page-main aside ul").customScrollbar();
		$('iframe.mainContent').attr('height',$(window).height()-100);
		if (!!window.chrome && !(!!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0)) {
			$(".page-main > aside > button").attr('disabled', 'disabled');
		}
	});
	
	$(window).resize(function(){
		  $('iframe.mainContent').attr('height',$(window).height()-100);
		  $(".page-main aside ul").customScrollbar("resize", true);
	});
	
</script>

</head>

<!-- 
<frameset rows="90,*" frameborder="no">
   <frame src="pages/header.html" name=f1>
　　 <frame src="pages/homepage.html" name=f2>
</frameset>
 -->

<body style="background-color: #ffe6b5;">

	<a href="images/cat1.jpg" data-lightbox="imageset-1" title="第三隻貓">
		<img id="cat1" class="inv">
	</a>
	<a href="images/cat.jpg" data-lightbox="imageset-1" title="第二隻貓"> <img
		id="cat" class="inv">
	</a>
	<a href="images/paw-icon.jpg" data-lightbox="imageset-1" title="第一隻貓">
		<img id="paw-icon" class="inv">
	</a>


	<div class="page-main" role="main" style="z-index: 10;">
		<aside>
			<ul class="default-skin">
				<li style="list-style-image: url(images/thumbnail.jpg);">sss</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">ssdfsds</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">sssdfdsfs</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">ssfdfsss</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">sdssfss</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">ssss</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">ssfsss</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">sss</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">sss</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">ssdfsds</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">sssdfdsfs</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">ssfdfsss</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">sdssfss</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">ssss</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">ssfsss</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">sss</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">ssdfsds</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">sssdfdsfs</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">ssfdfsss</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">ddd</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">ccc</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">bbb</li>
				<li style="list-style-image: url(images/thumbnail.jpg);">aaa</li>
			</ul>
			<button>
				<img src="images/sidebar-arrow-right.png" style="opacity: 0.5;">
			</button>
		</aside>
	</div>


	<div id="option" title="個人設定">
		<iframe frameborder="0" scrolling="no" width="450" height="415"
			src="pages/Settings.html"> </iframe>
	</div>

	<div id="signup" title="註冊" style="font-size: 24px">
		<iframe frameborder="0" scrolling="no" width="550" height="500"
			src="pages/SignUp.html"> </iframe>
	</div>

	<div id="manageactivity" title="管理活動" style="font-size: 24px">
		<iframe frameborder="0" class="autoHeight" scrolling="no" width="550"
			height="300" src="pages/ManageActivity.html"> </iframe>
	</div>



		<div class="menu">

			<span id="logo"> <a href="pages/Content.html" target=f3
				class="logotextclass">全球第一貓咪社群網站</a> <a
				href="pages/Content.html" target=f3><img
					src="images/logo.png" id="logoid" class="logoclass"></a> <img
				src="images/logo-hover.png" id="logoid-hover"
				style="position: absolute; top: 4px; left: 0px; z-index: -1;">
			</span>

			<div style="float: right; display: inline-block;">
				<a href="#" id="ui-carousel-prev"
					style="position: absolute; top: 37px; right: 594px;"><img
					src="images/arrow-left.png" class="boardarrowclass"></a>
				<div id="carousel" style="position: absolute; right: 285px;">
					<div id="a1">
						<a href="pages/Board.html#board1" class="board" target=f3>部分使用者並不喜歡閱讀法律文件，但這些內容十分重要。我們的《服務條款》用字簡單，沒有難懂的術語。我們呼籲每一位使用者花費您寶貴的 5 分鐘閱讀我們的《服務條款》，謝謝您的配合。</a>
					</div>
					<div id="a2">
						<a href="pages/Board.html#board2" class="board" target=f3>[提醒] 依預設，任何 ChatChatCat 用戶都可以向您傳送交友邀請，目前我們並沒有針對使用者的封鎖功能。若您不希望某位使用者一直向您傳送交友邀請，請您忽略這則交友通知，而不要按下「拒絕」。</a>
					</div>
					<div id="a3">
						<a href="pages/Board.html#board3" class="board" target=f3>[呼籲] 沒有登入到 ChatChatCat 的人可看到您的個人名稱以及大頭貼照。您可以自行設定這些人是否可以看到您的生日、E-mail、個人簡介以及性別。</a>
					</div>
					<div id="a4">
						<a href="pages/Board.html#board4" class="board" target=f3>這是第四則公告，沒梗了。</a>
					</div>
					<div id="a5">
						<a href="pages/Board.html#board5" class="board" target=f3>這是第五則公告，沒梗了。</a>
					</div>
				</div>
				<a href="#" id="ui-carousel-next"
					style="position: absolute; top: 37px; right: 260px;"><img
					src="images/arrow-right.png" class="boardarrowclass"></a> 
					
					<div class="iconclass"><!-- 若不用<a>包裹<img>，可容易解決游標停於邊緣的抖動問題-->
					<a href="#" id="commenticon" class="afterlogin"><img src="images/commenticon.png"><span class="alarmnumber">3</span></a> 
					<a href="#" id="addfriendicon" class="afterlogin"><img src="images/addfriendicon.png"></a> 
					<a href="#" id="activityicon" class="afterlogin"><img src="images/activityicon.png"><span class="alarmnumber">16</span></a>
					<a href="#" id="warningicon" class="afterlogin"><img src="images/warningicon.png"><span class="alarmnumber">7</span></a>
					</div>
					
					<a href="#" id="openoption" class="buttonClass afterlogin"
					style="position: absolute; top: 58px; right: 147px; font-size: 14px;">設定</a>  <a
					href="#" id="logout" class="buttonClass afterlogin"
					style="position: absolute; top: 58px; right: 77px; font-size: 14px;">登出</a>
			</div>
		
		</div>

	<div class="mainContentblock">

		<iframe class="mainContent" src="pages/MainContent.html" name=f2 scrolling="no"></iframe>

	</div>

</body>

</html>
